<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<h1 id = "title">1111</h1>
<h1>2222</h1>
<h1>3333</h1>


<input type ="button" id ="btn1" value="点一下1">
<input type ="button" id ="btn2" value="点一下2">
<body>
    <!-- js中<script>建议放在body标签内部，这样浏览器会优先加载，不会阻塞页面渲染   
        浏览器会按照顺序执行js代码 -->
    <script>
        //一.js引入与输出
        //1.直接引入
        alert("hello JS");
        //2.外部引入(在HTML中引入js文件使用<script src="">引入)
        //         (在js文件中引入js文件使用在import在开头)
        //<script scr = "js/text1.js">
         
        //二.js基础语法：
        //1.输出语句：    
        //*console.log() 在浏览器控制台中显示
        //*alert()  弹出警告框
        //document.write() 在html输出内容

        //2.变量：js为弱类型所以用let,常量用const
        let a= 10;
        a = 20;
        const b = 50;
        alert(b);
        alert(a);
        //数据类型：虽然是弱类型，但依然存在，使用typeof关键词返回数据类型
        //         引入字符串类型，可以使用单引号和双引号，也可以是反引号(``),
        //          使用反引号引起来的字符串被称为模板字符串，在内容的拼接中使用${}来引用变量
        let name ="tom";
        let age = 18;
        console.log('大家好，我是'+name+'，我今年'+age+'岁');        
        console.log(`大家好，我是${name}，我今年${age}岁`);        
        
        //3.函数(不需要声明变量) function
        //3.1 方法一：
        function add1(a,b){
            return a+b;
        }
        //3.2 方法二：匿名函数
        //函数表达式
         let add2 = function(a,b){
            return a+b;
         }
        //箭头函数
         let add3 = (a,b) =>{
            return a+b;
         }

         //4.自定义对象:使用逗号分开
         //调用属性与方法使用 对象名.属性名 对象名.方法名
         let student ={
            name : "tom",
            age :18,
            班级:"6(1)",
            sing: function(){
             console.log("悠悠的唱着最炫的民族风~");
         },
            song(){
                console.log("kfjkal");
                
            }
         }
        console.log( student.age);
        console.log(student.sing);
        
         //json:JSON是通过JavaScript标记法书写的文本。格式：
        //  {
        //     "key" : value,
        //     "key" ：value,
        //     "key" : value
        //  }
        //js==>json 用JSON.stringify()
        //json==>js 用JSON.parse()

        let person = {
        name: 'itcast',
        age: 18,
        gender: '男'
        }
        alert(JSON.stringify(person)); 

        let personJson ='{"name":"heima","age":18}';
        alert(JSON.parse(personJson));


        //DOM操作
        //- 改变 HTML 元素的内容
        // - 改变 HTML 元素的样式（CSS）
        // - 对 HTML DOM 事件作出反应
        // - 添加和删除 HTML 元素
        //如何调用DOM元素
        document.querySelector('css选择器')//匹配第一个元素
        document.querySelectorAll('css选择器')//匹配所有元素，伪数组，有索引

       //修改第一个h1标签的文本内容
       //1.获取DOM对象
       let h1 = document.querySelector('h1');
       let h2 = document.querySelector('#title');
       let h3 = document.querySelectorAll('h1');
       //2.调用DOM对象中的属性与方法(查文档)
       h3[0].innerHTML="修改的文本内容";

       //事件监听
        //    什么是事件呢？HTML事件是发生在HTML元素上的 “事情”，例如：
        //     - 按钮被点击
        //     - 鼠标移到元素上
        //     - 输入框失去焦点
        //     - 按下键盘按键
        //     - ........
        //     而我们可以给这些事件绑定函数，当事件触发时，可以自动的完成对应的功能，这就是事件监听。
        //分为：
            // 鼠标事件：click:鼠标点击，mouseenter:鼠标移入，mouseleave:鼠标移出
            // 键盘事件：keydown:键盘按下触发，keyup:键盘抬起触发
            // 焦点事件：focus：获取焦点触发，blur：失去焦点触发
            // 表单事件：input：用户输入时触发，submit：表单提交时触发
        //监听的语法：    
        //  事件源.addEventListener('事件类型'，要执行的函数)；
        //事件源：那个dom元素触发了事件，获取dom元素
        //事件类型：用什么方式触发，如鼠标，键盘事件
        //要执行的函数: 要做什么事
        
        document.querySelector("#btn1").addEventListener('click',()=>{
            alert("按钮1被点击....")
        })
        document.querySelector("#btn2").addEventListener('click',()=>{
            alert("按钮2被点击....")
        })

    </script>
</body>
</html>